/* =====
    form
   ===== */
$padding-normal: 9px 12px;
$padding-small: 8px 12px;

$h: 41px;
$h-small: 34px;

.ui-form {
  font-size: $font-size-normal;
  .form-group {
    position: relative;
    margin-bottom: 16px;
  }
  .label {
    display: inline-block;
    width: 165px;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;
    line-height: 41px;
  }
  &.small {
    font-size: $font-size-small;
    .form-group {
      margin-bottom: 12px;
    }
    .label {
      line-height: 34px;
    }
    .tips {
      top: 8px;
      margin-left: 12px;
    }
  }
  .tips {
    position: absolute;
    left: 500px;
    top: 10px;
    margin-left: 13px;
    color: $color-text-gray;
  }
}

/* -----
    form control
   ----- */
%control {
  border: 1px solid $color-border;
  border-radius: $radius-normal;
  font-size: $font-size-normal;
  vertical-align: middle;
  transition: border .3s;
}

.ui-form-control {
  padding: $padding-normal;
  width: 320px;
  @extend %control;
  &:focus {
    border-color: $color-border-focus;
  }
  &.disabled {
    background-color: $background-gray-hover;
  }
  &.error {
    border-color: $color-text-warn;
    &:focus {
      border-color: $color-text-warn;
    }
  }
  &.small {
    padding: $padding-small;
    font-size: $font-size-small;
    border-radius: $radius-small;
    & + .count {
      bottom: 8px;
      font-size: $font-size-small;
    }
  }
}



/* -----
    input
   ----- */
.ui-labeled-input {
  .input-label {
    display: inline-flex;
    width: 320px;
    overflow: hidden;
    border: 1px solid $color-border;
    border-radius: $radius-normal;
  }
  .text {
    padding: $padding-normal;
    color: map_get($fc1, 200);
    background: $background-gray-hover;
    & + .input {
      border-left: 1px solid $color-border;
    }
  }
  .input {
    padding: $padding-normal;
    min-width: 10px;
    border: 0;
    flex: 1;
    & + .text {
      border-left: 1px solid $color-border;
    }
  }
}

/* -----
   enter count
   ----- */
.ui-enter-count {
  display: inline-block;
  position: relative;
  .ui-form-control {
    padding-right: 50px;
  }
  .count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: $color-text-disabled;
  }
}

/* -----
    checkbox radio
   ----- */

@each $type in checkbox, radio {
  .ui-#{$type}-like {
    padding-right: 20px;
    cursor: pointer;
    .#{$type}-item {
      display: none;
    }
    .fa {
      color: $color-primary;
    }
    &.small {
      padding-right: 16px;
      font-size: $font-size-small;
    }
  }
}

.ui-checkbox-like {
  .checkbox-item:checked + i:before {
    content: "\f14a";
  }
}

.ui-radio-like {
  .radio-item:checked + i:before {
    content: "\f192";
  }
}

/* -----
    select
   ----- */
.ui-select {
  $h: 43px;
  height: $h;
  display: inline-block;
  position: relative;
  .ui-vertical-menu {
    position: absolute;
    left: 0;
    top: $h + 8px;
  }
  .ui-form-control {
    cursor: default;
  }
  .input-wrap {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    .fa-angle-down {
      position: absolute;
      right: 14px;
      top: 16px;
      color: $color-border;
    }
    input:focus + .fa {
      color: $color-primary;
    }
  }
}



// vue
.transition-drop {
  transition: transform .3s, opacity .3s;
  transform: translate3d(0, 0, 0) scaleY(1);
  transform-origin: center top;
}

.transition-drop-enter,
.transition-drop-leave-active {
  opacity: 0;
  transform: translate3d(0, -6px, 0) scaleY(0);
}

/* -----
    validate
   ----- */
.ui-control-wrap {
  .error-tip {
    position: absolute;
    margin-left: 5px;
    margin-top: 6px;
    height: 24px;
    padding: 2px 7px;
    border-radius: $radius-normal;
    background: $color-text-warn;
    color: $color-white;
    line-height: 20px;
    font-size: $font-size-small;
    &:after {
      content: '';
      position: absolute;
      top: 8px;
      left: -10px;
      height: 0;
      width: 0;
      border: 5px solid transparent;
      border-right-color: $color-text-warn;
    }
  }
}





